// Core variables and mixins separate from frontend variables and mixins
@import "dashboard/variables.less"; // Modify this for custom colors, font-sizes, etc
@import "dashboard/mixins.less";

// Components: Icons / Fonts
@import "font-awesome/font-awesome.less"; // Replaced sprites with font-awesome
@import "font-awesome/font-awesome-ie7.less";
@import url("http://fonts.googleapis.com/css?family=Open+Sans:700,300");

// FONT FOR THE DASHBOARD
// -----------------------------

// TYPES CHANGES
// -----------
h1, h2, h3, h4, h5, h6 {
  margin-bottom:@baseLineHeight / 2;
  margin-top:0;
  font-weight:normal;
}
h1 {
    font-size: 30px;
}
h2 {
    font-size: 18px;
}
body {
  font-family: @dashFontFamily;
  font-size: 12px;
}
label, input, button, select, textarea {
  font-size: 12px;
}
h3 {
  font-size: 20px;
}
h3.app-ico:before {
    display: none;
}
// BUTTONS
// -----------
.btn {
  font-weight:normal;
}
.btn-group > .btn,
.btn-group > .dropdown-menu,
.btn {
  font-size:12px;
}
.btn-warning,
.btn-success,
.btn-info {
  .buttonBackground(@white, darken(@white, 10%));
  color: inherit;
  *color: #333;
  &:hover,
  &:active {
   color:inherit;
   *color: #333;
  }
}
.btn-primary {
  .buttonBackground(#0083C9, #005096);
}
.btn-primary,
.btn-danger {
  font-weight:bold;
}
td .btn-toolbar {
  margin:0;
}
//ICONS
.icon-large:before {
  font-size: 18px;
}
.btn {
  .icon-large {
    position:relative;
    top:2px;
    padding-right: 5px;
  }
}

// FORM CHANGES
// -----------
.form-horizontal,
.form-stacked {
  .control-label {
      text-align: left;
  }
  .control-group {
    margin-bottom:@baseLineHeight / 2;
  }
  input[type=text],
  textarea,
  select {
    .box-sizing(border-box);
    font-size:12px;
    min-height: 35px;
  }
  textarea {
    max-height:200px;
  }
}
.form-inline {
  select {
    min-width:200px;
  }
}
.form-inline {
  margin-bottom: 0;
  .help-block:first-child {
    display:none;
  }
  label {
    margin-right: 5px;
  }
  .control-group {
    margin-right:10px;
  }
}
.fields-full {
  input[type=text],
  textarea {
    width:100%;
  }
}
.well,
.tabbable.dashboard .tab-content {
  .form-actions {
    margin-bottom:0;
    position:relative;
    bottom:-19px;
    left:-19px;
    width:100%;
    padding: 19px;
    border-top-color: #ccc;
  }
}
.tabbable.dashboard .tab-content {
  .form-actions {
    bottom:-29px;
    left:-29px;
    padding-left: 29px;
    padding-right: 29px;
  }
}
.well form {
  .form-actions {
    bottom:-39px;
  }
}
.create-page {
  .form-horizontal,
  .form-stacked {
    input[type=text],
    textarea {
      width:95%;
    }
  }
  .form-stacked {
    .form-inline {
      input[type=text],
      textarea {
        width:auto;
      }
    }
  }
  label {
    font-weight:bold;
  }
}
input[type=text].hasDatepicker,
.create-page input[type=text].hasDatepicker,
.form-inline input[type=text].hasDatepicker,
.form-horizontal input[type=text].hasDatepicker,
.form-stacked input[type=text].hasDatepicker {
    width: 125px;
}
.wysihtml5-sandbox {
    border:1px solid #ccc!important;
}
/* ADDITIONAL ERRORS */
.errorlist {
  margin:0 0 0 20px;
  padding:0 0 10px 0;
  color:#B94A48;
  li {
    padding:0 0 5px 0;
    list-style:none;
  }
}
.form-inline {
  .help-block {
    display:inline-block;
    margin:0 20px 0 10px;
    li {
      list-style:none;
      color:#B94A48;
    }
  }
  input[type=text] {
    width: 140px;
  }
}
// TABLE CHANGES
// -----------
.table-bordered,
.table-bordered th,
.table-bordered td  {
  border-color:#bbb;
}
.table {
  background-color: @white;
}
.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th {
  background-color: #efefef;
}
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
background-color: #FFF49F;
}
// OSCAR DASHBOARD UNIQUE STYLES
// -----------
body {
  background: url("/static/oscar/img/ui/dashboard/bg_subtle_dots.png") repeat scroll 0 0 #fff;
}
.container-fluid.dashboard {
  margin: 0 auto;
/*  max-width: 1170px;*/
  position: relative;
}
.dashboard > .content {
  margin-top: @baseLineHeight;
}
.fancypages .dashboard > .content {
}
.navbar-accounts {
  .navbar-inner {
    padding-left:  20px;
    padding-right: 20px;
    min-height: 50px;
    font-size: 12px;
    #gradient > .vertical(#373737, #242424);
    border: none;
    .brand {
      background: url("/static/oscar/img/ui/dashboard/logo_oscar.png") no-repeat scroll 0 0 transparent;
      text-indent: -9999px;
      display: block;
      width: 60px;
      height: 38px;
      padding: 0;
      margin-left: 0;
      margin-top: 5px;
    }
    .nav {
      top: 5px;
    }
    .nav > li > a {
      color: #C1C1C1;
    }
  }
}
.navbar .nav > li span {
    display:block;
    padding:10px;
}
.navbar-inverse {
  color: #DCDCDC;
}
.subnav-fixed {
  position: fixed;
  right: 0;
  left: 0;
  z-index: @zindexFixedNavbar;
  top: 50px;
  .box-shadow(0 1px 5px rgba(0,0,0,.1));
  border-bottom:1px solid #D5D5D5;
}
.navbar-primary {
  .navbar-inner {
    #gradient > .vertical(#353535, #373737);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) !important;
    border-top: 1px solid #5B5B5B;
    *position:relative;
    *z-index:10;
  }
}
.navbar-primary {
  .nav {
    &.nav-pills .open .dropdown-toggle {
      border-color: #444;
      border-right-color: #222;
    }
    > li {
      > a {
        margin: 0;
        border-left: 1px solid #444;
        border-right: 1px solid @grayDarker;
        .border-radius(0);
        color: #DCDCDC;
        font-size: 12px;
        padding: 15px;
        .caret {
          border-top-color: #DCDCDC;
          border-bottom-color: #DCDCDC;
          margin-top: 4px;
        }
      }
      .dropdown-menu {
        .border-radius(0);
      }
    }
  }
  .nav > .active > a,
  .nav > .active > a:hover,
  .nav > li > a:hover,
  .nav-pills .open .dropdown-toggle {
    color: #B2DEF2;
    background-color: #373737;
    border-right-color: @grayDarker;
    .box-shadow(inset 0 3px 5px rgba(0,0,0,.05));
    #gradient > .vertical(#1F1F1F, #373737);
    &:before {
      color: #B2DEF2;
    }
  }
}


.navbar-primary .nav {
  > li i {
    color: #dcdcdc;
    font-family: 'FontAwesome';
    padding-right: 12px;
    font-size: 16px;
  }
}

.navbar-primary .nav > li > a:hover .caret {
  border-top-color: #B2DEF2;
  border-bottom-color: #B2DEF2;
}

.breadcrumb {
  margin-top:20px;
}
button {
  background-color:transparent;
}
.page-header {
  padding: 0 20px 10px 0;
  margin-bottom: 0;
  border-bottom: 0;
}
caption,
.table-header {
  .clearfix();
  h2,h3 {
    font-weight: bold;
    font-size: 14px;
    line-height: 28px;
    margin:0;
    > i {
      padding-right: 10px;
    }
  }
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 0;
  border: 1px solid #ccc;
  border-bottom: none;
  #gradient > .vertical(#F8F8F8, #e5e5e5);
  color: #242424;
  padding: 6px 10px;
  .border-radius(3px 3px 0 0);
  text-align: left;
  line-height: 28px;
  .btn-toolbar {
    margin-top:0;
    margin-bottom:0;
  }
  > i {
    padding-right: 10px;
  }
}
.content-block {
  border: 1px solid #ccc;
  margin-bottom: 20px;
  padding: 15px;
  background: @white;
  .order-graph-details {
    label {
      background-color: #F8F8F8;
      border: 1px solid #ccc;
      .clearfix();
      display:block;
      margin-bottom: 15px;
      padding: 12px;
      color: #878787;
      font-size: 12px;
      span {
        display: inline-block;
        font-weight: bold;
        width: 30%;
        font-size: 16px;
        color: #242424;
      }
      i {
        color: #0D84AE;
        margin-right: 5px;
        font-size: 18px;
      }
    }
  }
}
.search-adv {
  margin:0;
  position:relative;
  ul, li, li > label, > label, input[type=text] {
    display:inline-block;
  }
  > input[type=text] {
    width:80px;
  }
  ul {
    margin:0;
  }
}
.no-float {
  float:none;
}
.control-group.pull-left.no-float {
  > label {
    width: 140px;
  }
  .controls {
    margin-left: 160px;
  }
}
.pull-left.btn {
  margin-left:20px;
}
.pull-left.no-float.btn {
  margin-left:160px;
}
.controls {
  ul {
    margin-left:0px;
    list-style:none;
  }
}
.alert-message.block-message.file_upload p {
  margin-right:10px;
}
.tabs.product_managment {
  margin-bottom:0px;
  li.active a {
    background-color:#efefef;
  }
}
.tabbable.dashboard {
  margin-bottom:@baseLineHeight;
  .navbar, .nav-tabs {
    margin-bottom:0;
  }
  .tab-content {
    display:block;
    width:auto;
    border:1px #E1E1E1 solid;
    border-top-width:0;
    padding:30px;
  }
}
// WELLS
// -----
.well,
.alert,
.table-bordered {
  .border-radius(0);
}
.well {
  .clearfix();
  box-shadow: none;
  background-color: #efefef;
  border-color: #bbb;
}
.well-success {
  background-color: @successBackground;
  border-color: @successBorder;
}
.well-danger {
  background-color: @errorBackground;
  border-color: @errorBorder;
}
.well-info {
  background-color: @infoBackground;
  border-color: @infoBorder;
}
.well-blank {
  background-color: @white;
  border-color: rgba(0,0,0,.1);
}
.create-page .well,
.promotions .well-info {
    background-color: @white;
}
// ALERTS
// -----
.alert {
  background-color: #fff49f;
  border-color: #ede181;
  color: #333;
}
// DASHBOARD GRAPH
// ----------------
#order-graph {
    position: relative;
    margin-bottom: 5em;
    width: 99%;
    height: @graphHeight;
}
.bar-caption {
  position: relative;
  text-align: center;
  top: 0;
  h1 {
    font-size: 18px;
    color: #242424;
    font-weight: bold;
    text-transform: uppercase;
  }
}
.bar-y-axis{
    position: absolute;
    top: 16px;
    width: 5em;
    margin: 0;
    padding: 0;
    float: left;
    display: inline;
}
.bar-y-axis li{
    list-style:none;
    height: @graphSegmentsHeight;
    float: right;
    color: #868686;
}
.bar-chart, .bar-chart dt, .bar-chart dd{
    margin:0;
    padding:0;
}
.bar-chart{
    position: absolute;
    top: 0;
    left: 0;

    width: 98%;
    height: @barHeight;
}
.bar-chart dd{
    position: relative;
    float: left;
    width: @barWidth;
    height: @graphHeight;
    margin-top: 22px;
}
.bar-chart dd em{
    position: absolute;
    bottom: -2em;
    right: 0;
    font-style: inherit;
    color: #868686;
}
.bar-chart span{
    position: absolute;
    display: block;
    width: 30%;
    bottom: 0;
    right: 0;
    z-index: 1;
    color: @gray;
    text-align: center;
    text-decoration: none;
}
.bar-chart span p {
    position: relative;
    top: 1em;
    display: none;
    padding: 3px;
    color: @grayDark;
    z-index: 2;
    background-color: @white;
    font-weight: bold;
    .border-radius(3px);
}
.bar-chart span {
    height: 50%;
    #gradient > .vertical(#0e91bf, #0b759b);
}
// ORDER SUMMARY
// ----------------
.order-summary {
  .horiz_col();
    background:#efefef;
    li {
      width: @fifth;
      text-align:center;
    }
    div {
      border-left:1px solid #dcdcdc;
      padding:20px 10px;
      min-height:85px;
    }
    strong {
      display:block;
      margin-top:20px;
    }
    li {
      width: 16%;
    }
    li:first-child div {
      border-left:none;
    }
}

// PRODUCT UPDATE
// ----------------
.orders_search {
  position:absolute;
  top:40px;
  width:100%;
  left:-20px;
  padding:0 20px;
  background:#cfe1e3;
  .clearfix();
  .control-group:first-child {
    margin-top:20px;
  }
  .btn {
    margin-bottom:20px;
  }
}
.orders_search.collapse {
  display:none;
}
.orders_search.in.collapse {
  display:block;
}
.category-select {
  display:block;
  margin:0;
  a {
    color:@grayDarker;
    text-decoration:none;
    padding:3px 10px;
    display:block;
    &:hover {
      background:darken(@grayLighter, 5%);
    }
  }
  a.app-ico {
    color:@linkColor;
  }
  ul {
    margin:0;
    a {
      padding-left:18px;
    }
    ul a {
      padding-left:33px;
      ul a { padding-left:48px; }
    }
  }
  li {
    display:block;
  }
}
.category-select > li ul {
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -o-transition: all .2s linear;
  -ms-transition: all .2s linear;
  transition: all .2s linear;
  overflow: hidden;
}
.ico_expand + ul {
  height:0px;
}
.category-selected {
  margin:0;
  li {
    display:block;
    width:150px;
    .clearfix();
    margin-bottom:@baseLineHeight / 2;
  }
  span {
    float: right;
    display: block;
    background: @grayLight;
    color: white;
    padding: 1px 0 3px;
    .border-radius(15px);
    font-size: 12px;
    line-height: 11px;
    width: 15px;
    font-weight: bold;
    text-align: center;
  }
}
#product_category {
  select {
    width:350px;
  }
}
.catalogue .tab-content {
  overflow:visible;
}
.upload-image {
  .clearfix();
  margin:0;
  li {
    display:block;
    width: 200px;
    margin:0 1% 2%;
    float: left;
    text-align:center;
    > div {
      padding: 4px;
      background: #ccc;
      margin-bottom: 10px;
      + label,
      + label + input {
        display: none;
      }
    }
  }
  div {
    background:#fff;
    position: relative;
    width: 200px;
    height: 200px;
    z-index: 200;
  }
  img {
    position: absolute;
    margin:auto;
    top: 0;
    max-height:200px;
    max-width:200px;
    width: auto;
    height: auto;
    left: 0;
  }
  .image-input {
    z-index: 800;
  }
  .image-input button {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    .border-radius(0);
  }
  .input-field {
    position: relative;
    z-index: 1000;
    opacity: 0;
  }
  .input-field input {
    position: absolute;
    border-width: 0 0 100px 200px;
    filter: alpha(opacity=0);
    -moz-transform: translate(-100px, 0) scale(1);
    direction: ltr;
    cursor: pointer;
    width: 200px;
    height: 200px;
  }
}
// SIDE NAV CREATE PAGES
// ----------------
div[data-spy="affix"] {
  width:266px;
}
div[data-spy="affix"].affix {
  top:@baseLineHeight;
}
.bs-docs-sidenav {
  padding: 0;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
     -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
          box-shadow: 0 1px 4px rgba(0,0,0,.065);
}
.bs-docs-sidenav > li > a,
.bs-docs-sidenav > li > span {
  display: block;
  margin: 0 0 -1px;
  padding: 8px 14px;
  border: 1px solid #e5e5e5;
  color:@linkColor;
  &:hover {
   background:#f1faff;
  }
  i.icon-info-sign {
    color:#ea0001;
    font-size:16px;
  }
}
.bs-docs-sidenav > li > span {
  color:#333;
}
.bs-docs-sidenav > .active > a,
.bs-docs-sidenav > .active > span {
  font-weight:bold;
  position: relative;
  color:@linkColor;
  background:#f1faff;
  z-index: 2;
  padding: 9px 15px;
  border-left: 0;
  border-right: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
     -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
          box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
  &:hover {
    background:#f1faff;
    color:@linkColor;
  }
  &:after {
    border-bottom: 10px solid transparent;
    border-left: 10px solid #f1faff;
    border-top: 10px solid transparent;
    content: "";
    display: inline-block;
    position: absolute;
    right: -9px;
    top: 9px;
  }
  &:before {
    border-bottom: 11px solid transparent;
    border-left: 11px solid #ccc;
    border-top: 11px solid transparent;
    content: "";
    display: inline-block;
    position: absolute;
    right: -10px;
    top: 8px;
  }
}
.fixed-actions {
  margin-bottom:180px;
  .fixed-actions-group {
    margin:0;
    z-index:1010;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
  }
  .form-actions {
    margin:0;
    background:#2a2a2a;
  }
}
.well-stacked {
  .well {
    margin-bottom:0;
    border-top-width:0;
    &:first-child {
      border-top-width:1px;
    }
  }
}


/* Sidenav for Docs
-------------------------------------------------- */
div[data-spy="affix"] {
  width:266px;
}
div[data-spy="affix"].affix {
  top:@baseLineHeight;
}

.bs-docs-sidenav {
  padding: 0;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
     -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
          box-shadow: 0 1px 4px rgba(0,0,0,.065);
}
.bs-docs-sidenav > li > a {
  display: block;
  width: 190px \9;
  margin: 0 0 -1px;
  padding: 8px 14px;
  border: 1px solid #e5e5e5;
  color:@linkColor;
  &:hover {
   background:#f1faff;
  }
  i.icon-info-sign {
    color:#ea0001;
    font-size:16px;
  }
}
.bs-docs-sidenav > .active > a {
  font-weight:bold;
  position: relative;
  color:@linkColor;
  background:#f1faff;
  z-index: 2;
  padding: 9px 15px;
  border-left: 0;
  border-right: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
     -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
          box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
  &:hover {
    background:#f1faff;
    color:@linkColor;
  }
  &:after {
    border-bottom: 10px solid transparent;
    border-left: 10px solid #f1faff;
    border-top: 10px solid transparent;
    content: "";
    display: inline-block;
    position: absolute;
    right: -9px;
    top: 9px;
  }
  &:before {
    border-bottom: 11px solid transparent;
    border-left: 11px solid #ccc;
    border-top: 11px solid transparent;
    content: "";
    display: inline-block;
    position: absolute;
    right: -10px;
    top: 8px;
  }
}

// PLUGINS
// -----

/* TINY SCROLL BAR */
 .scroll-pane {
	height: 200px;
	overflow: auto;
	background:lighten(@grayLighter, 5%);
	.border-radius(5px);
	border:2px solid lighten(@grayLight, 20%);
 }
 .scroll-pane:focus {
	outline:none;
 }
 .jspContainer{overflow:hidden;position:relative}
 .jspPane{position:absolute}
 .jspVerticalBar{position:absolute;top:0;right:0;width:10px;height:100%;background:red}
 .jspHorizontalBar{position:absolute;bottom:0;left:0;width:100%;height:10px;background:red}
 .jspVerticalBar *,.jspHorizontalBar *{margin:0;padding:0}
 .jspCap{display:none}.jspHorizontalBar .jspCap{float:left}
 .jspTrack{background:#efefef;position:relative}
 .jspDrag{background:#ccc;position:relative;top:0;left:0;cursor:pointer;.border-radius(5px);}
 .jspHorizontalBar .jspTrack,.jspHorizontalBar .jspDrag{float:left;height:100%}
 .jspArrow{background:#50506d;text-indent:-20000px;display:block;cursor:pointer}
 .jspArrow.jspDisabled{cursor:default;background:#80808d}
 .jspVerticalBar .jspArrow{height:10px}
 .jspHorizontalBar .jspArrow{width:10px;float:left;height:100%}
 .jspVerticalBar .jspArrow:focus{outline:0}
 .jspCorner{background:#eeeef4;float:left;height:100%}
 * html .jspCorner{margin:0 -3px 0 0}

/* Changes for wysihtml5 */
textarea {
	width: 500px;
	height: 400px;
}
// MODALS
// -----
.modal {
  > form {
    margin-bottom:0;
  }
}
// WYSIHTML5
// ---------

.wysihtml5-toolbar {
  .clearfix();
}

textarea.plain {
	font-family: monospace;
}
// DATETIMEPICKER
/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; }
.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }

// RESPONSIVE
// ---------
@media (max-width: 1300px) {
  div[data-spy="affix"] {
    width:200px;
  }
  .navbar-primary .nav {
    > li a:before {
      display:none;
    }
  }
  table .btn {
    padding: 3px 9px;
    font-size: @baseFontSize - 2px;
    line-height: @baseLineHeight - 2px;
  }
}
@media (max-width: 979px) {
  .affix {
    position:static;
  }
  div[data-spy="affix"] {
    width:100%;
    margin-bottom:@baseLineHeight;
  }
  .navbar-primary .nav > li > a {
    border:0;
    .border-radius(4px);
  }
  .navbar-primary .nav > li > a:hover {
    background:#222;
  }
}
